<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <link rel="stylesheet" href="../../layui/css/layui.css">
    <link rel="stylesheet" href="../../layui/css/formSelects-v4.css">
    <link rel="stylesheet" href="../../css/main.css">
    <link rel="stylesheet" href="../../css/department.css">
    <title>部门设置</title>
</head>
<body class="all">
<div id="departments">
    <div class="top">
        <div>
            <button type="button" class="layui-btn" @click="addData(1)"><i class="layui-icon">&#xe608;</i> 添加</button>
            <button type="button" onclick="exports()" class="layui-btn layui-btn-normal"><i
                    class="layui-icon">&#xe621;</i>导出
            </button>
        </div>
    </div>
    <div class="tabs">
        <table border="1px" id="deprats" cellpadding="0" cellspacing="0" bordercolor="#c2c2c2">
            <tr style="font-weight: bold">
                <td>序号</td>
                <td>操作</td>
                <td>填写人</td>
                <td>填写日期</td>
                <td>部门</td>
                <td>相关表单</td>
            </tr>
            <tr v-for="(item, index) in arr" :key='index'>
                <td>{{index+1}}</td>
                <td>
                    <span class="operation" @click="addData(2,index,item.id)">编辑</span>
                    <!--<span class="operation" v-else @click="saves(item.id,index)">保存</span>-->
                    <span @click="del(item.id)" class="operation">删除</span>
                </td>
                <td>{{item.user_name}}</td>
                <td>{{item.createtime}}</td>
                <td>{{item.name}}</td>
                <td>{{item.xiang}}</td>
            </tr>
        </table>
    </div>
    <div id="demo8"></div>
</div>
<div class="x-body" id="addopen" style="display: none;padding-top: 10px">
    <form class="layui-form">
        <div class="layui-form-item ipts">
            部门：
            <input type="text" id="bumen" value="" name="names" autocomplete="off" placeholder="请输入" class="layui-input">
        </div>
        <div class="layui-form-item ipts">
            相关表单：
            <select name="city" xm-select="method-value-example1" xm-select-show-count="1">
                <option value="1">产值计算表</option>
                <option value="2">直接费</option>
                <option value="3">专项措施费</option>
                <option value="4">安全文明费</option>
                <option value="5">项目管理人员工资</option>
                <option value="6">社保费</option>
                <option value="7">附加税</option>
                <option value="8">固定资产摊销费</option>
                <option value="9">经营管理费</option>
                <option value="10">其他费用</option>
                <option value="11">主表</option>
            </select>
        </div>
        <div class="layui-form-item">
            <label class="layui-form-label">
            </label>
            <button class="layui-btn ipts_btn" type="button" lay-filter="add" lay-submit="">
                保存
            </button>
        </div>
    </form>
</div>
</body>
</html>
<script type="text/javascript" src="../../js/jquery-3.3.1.js"></script>
<script type="text/javascript" src="../../layui/layui.all.js"></script>
<script type="text/javascript" src="../../layui/formSelects-v4.js"></script>
<script type="text/javascript" src="../../js/vue.js"></script>
<script type="text/javascript" src="../../js/main.js"></script>
<script type="text/javascript" src="../../js/excel.js"></script>
<script type="text/javascript" src="../../js/common.js"></script>
<script>
    layui.use(['element', 'laypage', 'layer', 'form', 'jquery'], function () {
        var laypage = layui.laypage,
            layer = layui.layer;
        form = layui.form;
        var element = layui.element;
        //添加项目
        form.on("submit(add)", function (data) {
            var a = JSON.stringify(layui.formSelects.value('method-value-example1', 'valStr')).replace(/\"/g, "");//
            var obj = {
                name: data.field.names,
                xg_table: a,
                project_id: vm.project_id
            }
            var url = '';
            if (vm.tys == 1) {
                url = 'api/department/departmentadd';
            } else {
                obj.id = vm.ids;
                url = 'api/department/departmenteditdo';
                vm.$set(vm.arr[vm.idx], 'statusr', false);
                vm.stus = 1;
            }
            var load = layer.load(2, {
                shade: [0.6, '#fff'] //0.1透明度的白色背景
            });
            $.when(PUATTRBUTE.REQUESTFUN(url, obj).done(function (res) {
                layer.close(load);
                layer.closeAll();
                if (res.code == 1) {
                    layer.msg(res.msg, {time: 1000, icon: 1});
                    vm.initData();
                } else {
                    layer.msg(res.msg, {time: 1000, icon: 2});
                }
            }))
        })
    });
    var vm = new Vue({
        el: '#departments',
        data: {
            token: '',
//            statusr:false,
            project_id: '',//项目Id
            page: 1,
            arr: [],
            ids: '',
            idx: '',
            user_name: '',//填写人
            createtime: '',//填写日期
            name: '',//部门
            xg_table: '',//相关表单
            stus: 1,
            tys: '',//判断是添加还是编辑,
            permissions:''//权限标识
        },
        created: function () {
            this.project_id = sessionStorage.getItem('projectopt');
            this.initData();
        },
        methods: {
            initData: function () {
                var obj = {
                    page: 1,
                    limit: 12,
                    project_id: this.project_id
                }
                $.when(PUATTRBUTE.REQUESTFUN('api/department/departmentindex', obj).done(function (res) {
                        if (res.code == 1) {
                            sessionStorage.setItem('department', JSON.stringify(res.data.part));
                            var arrs = res.data.part;
                            for (item in arrs) {
                                arrs[item].statusr = false;
                            }
                            vm.arr = arrs;
                            vm.initpage(res.data.count);
                        } else {
                            if(res.msg == "暂无权限"){
                                vm.permissions= 1 ;
                            }
                            vm.initpage(0);
                            layer.msg(res.msg, {time: 1000, icon: 2});
                        }
                    })
                )
            },
            //添加
            addData: function (ty, idx, ids) {
                if(this.permissions == 1){
                    layer.alert("抱歉，您没有此权限！")
                }else {
                    this.tys = ty;
                    this.ids = ids;
                    this.idx = idx;
                    if (ty == 2) {
                        this.$set(this.arr[idx], 'statusr', true);
                        //编辑初始化数据
                        var obj = {
                            id: ids,
                            project_id: this.project_id
                        }
                        $.when(PUATTRBUTE.REQUESTFUN('api/department/departmentedit', obj).done(function (res) {
                                if (res.code == 1) {
                                    $("#bumen").val(res.data.name);
                                    layui.formSelects.value('method-value-example1', res.data.xg_table.split(","));
                                } else {
                                    layer.msg(res.msg, {time: 1000, icon: 2})
                                }
                            })
                        )
                    } else {
                        $("#bumen").val("")
                        layui.formSelects.value('method-value-example1', []);
                    }
                    layer.open({
                        type: 1,
                        skin: 'layui-layer-rim', //加上边框
                        area: ['420px', '320px'], //宽高
                        title: '新增部门信息',
                        content: $("#addopen")
                    });
                }
            },
            //删除
            del: function (e) {
                var obj = {
                    id: e,
                    project_id: this.project_id
                }
                var load = layer.load(2, {
                    shade: [0.6, '#fff'] //0.1透明度的白色背景
                })
                layer.confirm('确定删除吗？', {
                    btn: ['确定', '取消'] //按钮
                }, function () {
                    $.when(PUATTRBUTE.REQUESTFUN('api/department/departmentdel', obj).done(function (res) {
                            layer.close(load);
                            layer.closeAll();
                            if (res.code == 1) {
                                layer.msg(res.msg, {time: 1000, icon: 1});
                                vm.initData();
                            } else {
                                layer.msg(res.msg, {time: 1000, icon: 2});
                            }
                        })
                    )
                }, function () {
                    layer.closeAll();
                });
            },
            editor: function (idx) {
                if (this.stus == 1) {
                    this.stus = 2;
                    this.$set(this.arr[idx], 'statusr', true);
                } else {
                    layer.alert('请先保存');
                    return false;
                }
            },
            initpage: function (count) {
                //自定义排版
                layui.laypage.render({
                    elem: 'demo8'
                    , count: count
                    , limit: 12
                    , jump: function (obj, first) {
                        if (!first) {
                            vm.page = obj.curr;
                            vm.initData();
                        }
                    }
                });
            }
        }
    })

    //导出
    function exports() {
        if(vm.permissions == 1){
            layer.alert("抱歉，您没有此权限！")
        }else {
            var tableHtml = $('#deprats');
//不能显示class的样式，所以自己重新添加样式 主要为设置边框 格子大小
            $(tableHtml).css({
                'border':'1px solid #d5d5d2',
                'text-align':'center',
                'border-collapse':'collapse',
            });
            $(tableHtml).find('tr td').css({
                'text-align':'center',
                'border':'1px solid #d5d5d2',
                'line-height':'30px',
                'padding':'0px 10px',
                'min-width':'100px'
            });
            var html = "<html><head><meta charset='utf-8' /></head><body>" + tableHtml[0].outerHTML + "</body></html>";
// 实例化一个Blob对象，其构造函数的第一个参数是包含文件内容的数组，第二个参数是包含文件类型属性的对象
            var blob = new Blob([html], { type: "application/vnd.ms-excel" });
            var urlA = document.createElement('a');
// 利用URL.createObjectURL()方法为a元素生成blob URL
            $('.table-btn-group').append(urlA);
            urlA.href = URL.createObjectURL(blob);
// 设置文件名，目前只有Chrome和FireFox支持此属性
            urlA.download = "部门设置.xls";
            urlA.click();
        }
    }
</script>

